<!-- 
使用方法:
import Button2 from '@/components/button2.vue'

<Button2>
    <div>
        按钮上的文字
    </div>
</Button2> 
-->

<template>
    <div class="btn-2">
        <slot>
        </slot>
    </div>
</template>


<script setup>

</script>

<style scoped>
.btn-2 {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 42px;
    padding: 0;
    border: none;
    font-size: 15px;
    color: rgb(255, 255, 255);
    background-color: rgb(252,134,167);
    border-radius: 5px;
    display: flex;  
    align-items: center;  
    justify-content: center;  
    cursor: pointer;
}

.btn-2:hover {
    color: black;
    background: transparent;
    box-shadow: none;
}

.btn-2:before,
.btn-2:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: rgb(252,134,167);
    box-shadow:
        -1px -1px 5px 0px #fff,
        7px 7px 20px 0px #0003,
        4px 4px 5px 0px #0002;
    transition: 400ms ease all;
}

.btn-2:after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
}

.btn-2:hover:before,
.btn-2:hover:after {
    width: 100%;
    transition: 500ms ease all;
}
</style>